<template>
    <Menu ref="sideMenu" accordion width="180" @on-select="clickMenu" :active-name="activeName">
        <template v-for="(item) in menuRouter">
            <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="'menuitem' + item.name">
                <Icon :type="item.children[0].icon || item.icon" :key="'menuicon' + item.name"></Icon>
                <span class="layout-text" :key="'title' + item.name">{{ item.children[0].title }}</span>
            </MenuItem>

            <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">
                <template slot="title">
                    <Icon :type="item.icon"></Icon>
                    <span class="layout-text">{{ item.title }}</span>
                </template>
                <template v-for="child in item.children">
                    <MenuItem :name="child.name" :key="'menuitem' + child.name">
                        <Icon :type="child.icon" :key="'icon' + child.name"></Icon>
                        <span class="layout-text" :key="'title' + child.name">{{ child.title }}</span>
                    </MenuItem>
                </template>
            </Submenu>
        </template>
    </Menu>
</template>

<script>

import menuRouter from '@/router/menuRouter'

export default {
    name: 'MenuLeftView.vue',
    data() {
        return {
            // 打开菜单 :open-names="openName"
            openName: '',
            // 路由
            menuRouter: menuRouter,
            activeName: '',
        }
    },
    methods: {
        clickMenu(val) {
            this.$router.push({name: val});
        }
    },
    mounted() {
        
    }
}
</script>

<style lang="less" scoped>

</style>